<template>
  <div>
    <TopNav :navlist="navlist" :navindex="navindex" @onChange="onClick" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" offset="4" finished-text="没有更多了" @load="onLoad">
        <div class="newList">
          <div v-for="(item,index) in newList" :key="index" class="newList_item">
            <div style="font-size:20px;">{{item.title}}</div>
            <div class="item_image">
              <div
                v-for="(item,index) in item.imageUrls"
                :key="index"
                v-show="index<3"
                class="image"
              >
                <img width="100%" height="100%" :src="item" alt />
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopNav from "../components/topNav";
import axios from "axios";
export default {
  components: {
    TopNav,
  },
  data() {
    return {
      navlist: ["美食", "财经", "故事", "热点", "娱乐", "体育", "航空", "游戏"],
      navindex: 0,
      newList: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onClick(index) {
      // console.log(index)
      this.navindex = index;
      this.save();
    },
    onRefresh() {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.navlist[this.navindex],
            page: 2,
          },
        })
        .then((res) => {
          // console.log(res.data.result.data);
          this.refreshing = true;
          this.newList = res.data.result.data;
          this.refreshing = false;
        })
        .catch((error) => {
          console.log(error);
        });
        this.finished = false
    },
    onLoad() {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.navlist[this.navindex],
            page: 1,
          },
        })
        .then((res) => {
          // console.log(res.data.result.data);
          this.loading = true;
          this.newList = [...this.newList,...res.data.result.data];
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
        });
        if (this.newList.length >= 40) {
          this.finished = true;
        }
    },
    save() {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.navlist[this.navindex],
            page: 1,
          },
        })
        .then((res) => {
          // console.log(res.data.result.data);
          this.newList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  }
};
</script>

<style scoped>
.newList {
  margin: 64px 0px 0px 0px;
}
.newList_item {
  padding: 20px 0px;
  border-bottom: 1px solid rgb(150, 149, 149);
}
.item_image {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
}
.image {
  margin: 0px 2px;
}
</style>
